<!--
	Module:			Cubic Spline demo
    Description:	javascript for cubic spline interpolation defined in Numerical Recipe in C.
    Reference:		Numerical Recipes in C 2nd Edition, Press, Teukolsky, Vetterling, Flannery, pg.113			
					Kevin Moot's Intro to HTML5 canvas http://moot-point.com/
    Author(s):		C.T. Yeung - port from C to JS.
    Input:			- Anchor points (x,y) in accending order of x.
    				- destination points x values.
    Output:			interpolated values (x,y) in accending order as input.
    History:		20Nov11		ported it to javascript, working in HTML5 canvas.			cty
-->
<!DOCTYPE html PUBLIC >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

	<LINK REL=StyleSheet HREF="default.css" TYPE="text/css" MEDIA=screen> 
  	<script src="http://code.jquery.com/jquery-latest.js"></script>
  	<script src="CubicSpline.js"></script>
  	<script>
	$(document).ready(function() {
		var pSrcX = new Array();
		var pSrcY = new Array();
		
		var canvas = document.getElementById('my_canvas');
		var context = canvas.getContext('2d');			
		
		$("#my_canvas").click(function (e) {						
			addAnchor(e.pageX, e.pageY);
			if(pSrcX.length > 1) {
				context.clearRect(0,0,canvas.width, canvas.height);	
				drawPieceWise();
				drawCubicSpline();
			}
		});
		
		$("#btnClear").click(function () {
			context.clearRect(0,0,canvas.width, canvas.height);
			context = canvas.getContext('2d');
			pSrcX = new Array();
			pSrcY = new Array();
		});
		
		// draw piece wise - lines between anchors
		function drawPieceWise() {
			context.beginPath();
			context.strokeStyle = 'green';
			context.moveTo(pSrcX[0], pSrcY[0]);
				
			for(var i=1; i<pSrcX.length; i++) {
				context.lineTo(pSrcX[i], pSrcY[i]);
				context.moveTo(pSrcX[i], pSrcY[i]);
			}
			context.stroke();
		}
		
		function drawCubicSpline() {
			context.beginPath();
			context.strokeStyle = 'blue';
			context.moveTo(pSrcX[0], pSrcY[0]);
			init();
			formulate(pSrcX, pSrcY);
			
			var stt = pSrcX[0]+1;
			var end = pSrcX[pSrcX.length-1];
			for(var x=stt; x<end; x++) {
				var y = getY(x);
				context.lineTo(x, y);
				context.moveTo(x, y);
			}
			context.stroke();
		}
		
		function addAnchor(x, y) {
			for(var i=0; i<pSrcX.length; i++) {
				if(x < pSrcX[i]) {				// insert value
					pSrcX.splice(i, 0, x);
					pSrcY.splice(i, 0, y);
					return true;
				}
				else if(x == pSrcX[i]) {		// update y
					pSrcY[i] = y;
				}
			}
			pSrcX.push(x);
			pSrcY.push(y);
			return true;
		}
  	});
	
	
	</script>
</head>

<body style="position:relative">

<canvas id="my_canvas" width="500" height="300">
    HTML5 canvas failed to load.
</canvas>
<p>HTML5 Cubic Spline demo - Numerical Recipes in C 2nd Edition, Press, Teukolsky, Vetterling, Flannery, pg.113</p>
<p>Mouse click with-in canvas.</p>
<div id="divCtrl">
	<input type="submit" id="btnClear" value="Clear"/>
</div>

</body>
</html>
